<template>
  <div>
    <div style="overflow:scroll" v-if="isHomePage">
      <mt-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :bottomDistance="bottomDistance"
      >
        <ul class="pro-detail-list-ul">
          <li
            class="pro-detail-list-item"
            v-for="item in proDetailList"
            @click="jumpToProDetail(item.id)"
          >
            <img :src="item.cover_img" alt="" class="pro-detail-img">
            <div class="pro-detail-content bg_colorff">
              <p class="pro-title color_33 font_size24 font-bold">{{item.package_name}}</p>
              <div class="flex flex-pack-justify p_t20">
                <span class="color_fc font_size24">￥{{item.price}}</span>
                <span class="buy-btn" @click.stop="buyProFuc(item)"></span>
              </div>
            </div>
          </li>
        </ul>
      </mt-loadmore>
    </div>
    <div v-else>
      <ul class="pro-detail-list-ul">
        <li
          class="pro-detail-list-item"
          v-for="item in proDetailList"
          @click="jumpToProDetail(item.id)"
        >
          <img :src="item.cover_img" alt="" class="pro-detail-img">
          <div class="pro-detail-content bg_colorff">
            <p class="pro-title color_33 font_size24 font-bold">{{item.package_name}}</p>
            <div class="flex flex-pack-justify p_t20">
              <span class="color_fc font_size24">￥{{item.price}}</span>
              <span class="buy-btn" @click.stop="buyProFuc(item)"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bottomDistance: 120
    };
  },
  props: {
    proDetailList: {
      type: Array,
      default: []
    },
    isHomePage: {
      type: Boolean,
      default: false
    },
    allLoaded: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    //点击购买
    buyProFuc(proID) {
      proID.num = 1
      this.$router.push({path: '/pay', query: {id: proID}});
    },
    //点击跳转详情页
    jumpToProDetail(proID) {
      this.$router.push(`/details/${proID}`);
    },
    loadBottom() {
      this.$emit("loadBottom");
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    }
  }
};
</script>
<style lang='less' scoped>
@import url(../../assets/css/common/proDetailList.less);
</style>
